<template>
  <div id="app">
    <el-container>
      <!--      <el-aside class="left-container" width="200px">-->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)" class="left-container" >
        <!--      router  是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
        /*@select="handleSelect*"/-->
        <el-menu default-active="1" class="el-menu-vertical-demo" router :unique-opened="false"
        >
          <el-submenu index="1">
            <template slot="title">商品</template>
            <el-menu-item index="/product-management">商品管理</el-menu-item>
            <el-menu-item index="/message">用户信息</el-menu-item>
          </el-submenu>
        </el-menu>

        <el-menu default-active="2" class="el-menu-vertical-demo" router :collapse="false" :unique-opened="true">
          <el-submenu index="1">
            <template slot="title">用户管理</template>
            <el-menu-item index="/user-management">用户管理</el-menu-item>
            <el-menu-item index="/user">用户信息</el-menu-item>
          </el-submenu>
        </el-menu>

        <el-menu default-active="2" class="el-menu-vertical-demo" router :collapse="false" :unique-opened="true">
          <el-submenu index="1">
            <template slot="title">用户管理</template>
            <el-menu-item index="/user-management">用户管理</el-menu-item>
            <el-menu-item index="/user">用户信息</el-menu-item>
          </el-submenu>
        </el-menu>


      </el-aside>
      <el-container>
        <el-header>
          <div class="header-left">商品管理系统</div>
          <div class="header-right">
            <el-avatar :src="user.avatar"></el-avatar>
            <span>{{ user.account }}</span>
            <el-button type="text" @click="logout">退出</el-button>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      user: {
        account: 'zhangsan', // 示例用户信息
        avatar: 'path/to/user/avatar.png',
      },
    };
  },
  components: {},
  methods: {
    logout() {
      // 退出登录的逻辑，清除token，重定向到登录页等
      localStorage.removeItem('token');
      this.$router.push('/login');
    },
    //菜单跳转
    handleSelect(key, keyPath) {
      console.log(key);
      this.$router.push(key)
    }
  },
};
</script>

<style>
/*#app {*/
/*  font-family: Avenir, Helvetica, Arial, sans-serif;*/
/*  text-align: center;*/
/*  color: #2c3e50;*/
/*  margin-top: 60px;*/
/*}*/
/* 应用整体 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: left; /* 修改为左对齐，更适合页面布局 */
  color: #333;
  margin-top: 0;
}

/* 侧边栏样式 */
.el-aside {
  background-color: #343a40; /* 深灰色背景 */
  color: #fff;
  height: 100%;
  transition: all 0.3s; /* 平滑过渡效果 */
}

/* 导航菜单项 */
.el-menu-item {
  color: rgba(255, 255, 255, 0.8);
}

.el-menu-item.is-active {
  background-color: #4CAF50; /* 选中项的背景色 */
  color: #fff;
}

/* 头部样式 */
.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  background-color: #4CAF50; /* 头部绿色背景 */
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  font-size: 24px;
  font-weight: bold;
}

.header-right {
  display: flex;
  align-items: center;
}

.el-avatar {
  margin-right: 10px;
}

/* 主内容区 */
.el-main {
  padding: 20px;
}

/* 退出按钮 */
.el-button--text {
  color: #fff;
}

/* 左侧容器的整体样式 */
.left-container {
  height: 100vh; /* 让左侧容器高度充满视口 */
  background-color: #343a40; /* 深灰背景色 */
  color: #ffffff; /* 文本白色 */
  transition: width 0.3s ease; /* 宽度变化时平滑过渡 */
}

/* 当需要响应式调整宽度时，可以通过媒体查询 */
@media (max-width: 768px) {
  .left-container {
    width: 60px; /* 在小屏幕下减小宽度 */
  }
}

/* 侧边栏内部菜单项样式 */
.left-container .el-menu {
  border-right: none; /* 移除右侧边框 */
}

.left-container .el-menu-item {
  padding: 0 24px; /* 调整内边距以适应内容 */
}

.left-container .el-menu-item.is-active {
  background-color: #4CAF50; /* 选中项的背景色 */
}

/* 如果需要调整滚动条样式，也可以在这里添加 */
.left-container::-webkit-scrollbar {
  width: 6px;
}

.left-container::-webkit-scrollbar-thumb {
  background-color: #6c757d; /* 滚动条颜色 */
  border-radius: 6px;
}
</style>
